<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { browseCarList, getCarTypes } from '@/api/car'
import { useRouter } from 'vue-router'

// 引入轮播图图片
import banner1 from '@/assets/pic3.png'
import banner2 from '@/assets/pic2.jpg'
import banner3 from '@/assets/pic1.jpg'


const router = useRouter()

// 响应式数据
const carList = ref([])
const carTypes = ref([])
const loading = ref(false)
const total = ref(0)

// 轮播图数据
const banners = [
  { url: banner1, alt: '平台介绍1' },
  { url: banner2, alt: '平台介绍2' },
  { url: banner3, alt: '平台介绍3' },

]

// 筛选条件
const filters = reactive({
  brand: '',
  typeId: '',
  minPrice: '',
  maxPrice: '',
  pageNum: 1,
  pageSize: 12
})

// 获取车辆类型列表
const loadCarTypes = async () => {
  try {
    const res = await getCarTypes()
    carTypes.value = res.data || []
  } catch (error) {
    console.error('获取车辆类型失败:', error)
    ElMessage.error('获取车辆类型失败')
  }
}

// 获取车辆列表
const loadCarList = async () => {
  loading.value = true
  try {
    const res = await browseCarList(filters)
    carList.value = res.data?.records || []
    total.value = res.data?.count || 0
  } catch (error) {
    console.error('获取车辆列表失败:', error)
    ElMessage.error('获取车辆列表失败')
  } finally {
    loading.value = false
  }
}

// 重置筛选条件
const resetFilters = () => {
  filters.brand = ''
  filters.typeId = ''
  filters.minPrice = ''
  filters.maxPrice = ''
  filters.pageNum = 1
  loadCarList()
}

// 搜索
const handleSearch = () => {
  filters.pageNum = 1
  loadCarList()
}

// 分页变化
const handlePageChange = (page) => {
  filters.pageNum = page
  loadCarList()
}

// 查看车辆详情
const viewCarDetail = (car) => {
  router.push(`/user/carDetail/${car.id}`)
}

// 格式化价格
const formatPrice = (price) => {
  return `¥${price}/天`
}

// 获取车型名称
const getTypeName = (typeId) => {
  const type = carTypes.value.find(t => t.id == typeId)
  return type ? type.name : '未知'
}

onMounted(() => {
  loadCarTypes()
  loadCarList()
})
</script>

<template>
  <div class="car-browse">
    <!-- 新增轮播图区域 -->
    <el-carousel height="400px" :interval="5000" arrow="always" indicator-position="bottom">
      <el-carousel-item v-for="(banner, index) in banners" :key="index">
        <div class="carousel-item">
          <img
              :src="banner.url"
              :alt="banner.alt"
              class="carousel-image"
          >
          <!-- 可以在这里添加轮播图上的文字说明 -->
          <div class="carousel-caption">
<!--            <h3>{{ banner.alt }}</h3>-->
            <p>为您提供优质的租车服务体验</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 筛选区域 -->
    <el-card class="filter-card" shadow="never">
      <div class="filter-row">
        <el-row :gutter="15">
          <el-col :span="4">
            <el-input
                v-model="filters.brand"
                placeholder="品牌"
                clearable
            />
          </el-col>
          <el-col :span="5">
            <el-select
                v-model="filters.typeId"
                placeholder="车型"
                clearable
                style="width: 100%"
            >
              <el-option
                  v-for="type in carTypes"
                  :key="type.id"
                  :label="type.name"
                  :value="type.id"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-input
                v-model="filters.minPrice"
                placeholder="最低价"
                type="number"
                clearable
            />
          </el-col>
          <el-col :span="5">
            <el-input
                v-model="filters.maxPrice"
                placeholder="最高价"
                type="number"
                clearable
            />
          </el-col>
          <el-col :span="6">
            <div style="display: flex; gap: 10px;">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="resetFilters">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 车辆列表 -->
    <div class="car-list" v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="6" v-for="car in carList" :key="car.id">
          <el-card class="car-card" shadow="hover" @click="viewCarDetail(car)">
            <div class="car-image">
<!--              <img :src="car.images || '/default-car.jpg'"  /api/file/download.do?filename=${car.images}-->
<!--                   :alt="car.brand + ' ' + car.model" />-->

              <img :src="`/api/file/download.do?filename=${car.images}`"
              :alt="car.brand + ' ' + car.model" />
            </div>
            <div class="car-info">
              <h3 class="car-title">{{ car.brand }} {{ car.model }}</h3>
              <p class="car-type">{{ getTypeName(car.typeId) }}</p>
              <p class="car-color">颜色：{{ car.color }}</p>
              <div class="car-price">
                <span class="price">{{ formatPrice(car.dailyRent) }}</span>
                <span class="status" :class="car.status === 0 ? 'available' : 'unavailable'">
                  {{ car.status === 0 ? '可租' : '已租' }}
                </span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 空状态 -->
      <el-empty v-if="!loading && carList.length === 0" description="暂无车辆数据" />
    </div>

    <!-- 分页 -->
    <div class="pagination" v-if="total > 0">
      <el-pagination
          v-model:current-page="filters.pageNum"
          v-model:page-size="filters.pageSize"
          :total="total"
          :page-sizes="[12, 24, 48]"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
          @size-change="loadCarList"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.car-browse {
  padding: 20px;

  // 轮播图样式
  .el-carousel {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .carousel-item {
    position: relative;
    height: 100%;
  }

  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    text-align: center;
  }

  .filter-card {
    margin-bottom: 20px;

    .filter-row {
      margin-bottom: 15px;
    }

    .filter-actions {
      text-align: right;
    }
  }

  .car-list {
    min-height: 400px;

    .car-card {
      margin-bottom: 20px;
      cursor: pointer;
      transition: transform 0.2s;

      &:hover {
        transform: translateY(-2px);
      }

      .car-image {
        height: 180px;
        overflow: hidden;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .car-info {
        padding: 15px 0;

        .car-title {
          font-size: 16px;
          font-weight: bold;
          margin: 0 0 8px 0;
          color: #303133;
        }

        .car-type, .car-color {
          font-size: 14px;
          color: #606266;
          margin: 4px 0;
        }

        .car-price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;

          .price {
            font-size: 18px;
            font-weight: bold;
            color: #e6a23c;
          }

          .status {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;

            &.available {
              background-color: #f0f9ff;
              color: #67c23a;
            }

            &.unavailable {
              background-color: #fef0f0;
              color: #f56c6c;
            }
          }
        }
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }
}
</style>
